<style>
    .el-input__inner {
        height: 30px !important;
    }

    .layui-form .el-cascader {
        line-height: 30px;
        ;
    }

    .layui-form-label {
        width: 90px;
    }

    .layui-input-block {
        margin-left: 120px;
    }
</style>
<div class="rightcontent rc-bg-grey">
    <div class="rc-pagepadding">
        <form class="layui-form" action="">
            <div class=" rc-pannel layui-form">
                <div class=" rc-pannel-header rc-pagepadding rc-bold">
                    <i class="iconfont goback rc-pointer">&#xe62b;</i> 添加计划任务
                </div>



                <div class="rc-pannel-body rc-pagepadding">


                    <div class="layui-form-item">
                        <label class="layui-form-label">任务名称</label>
                        <div class="layui-input-block">
                            <input type="text" name="title" id="title" lay-verify="required" class="layui-input">
                        </div>
                    </div>

                    <div class="layui-form-item">
                        <label class="layui-form-label">任务类型</label>
                        <div class="layui-input-block">
                            <select autocomplete="off" lay-filter="tasktype" name="tasktype">
                                <option value="1">执行事件</option>
                                <option value="2">执行自定义方法</option>
                            </select>
                        </div>
                    </div>



                    <div class="layui-form-item" id="event_div">
                        <label class="layui-form-label">执行事件</label>
                        <div class="layui-input-block">
                            <input type="text" name="event_method_id" id="event_method_id"  class="layui-input">
                        </div>
                    </div>

                    <div class="layui-form-item" id="cus_method_div" style="display: none;">
                        <label class="layui-form-label">
                            自定义方法
                            <i class="layui-icon layui-icon-question rc-tips rc-pointer" message="例：chkupgrade/Index/index，chkupgrade/Index表示命名空间和类，index表示方法" style=" color: #7D8388;"></i>
                        </label>
                        <div class="layui-input-block">
                            <input type="text" name="custommethod" id="" class="layui-input">
                        </div>
                    </div>


                    <div class="layui-form-item">

                        <div class="layui-inline">

                            <label class="layui-form-label">执行周期</label>

                            <div class="layui-input-inline">

                                <select name="cycle" lay-filter="cycle" autocomplete="off">
                                    <option value="1">每分钟</option>
                                    <option value="2">每小时</option>
                                    <option value="3">每天</option>
                                    <option value="4">每周</option>
                                    <option value="5">每月</option>
                                </select>

                            </div>

                        </div>

                        <div class="layui-inline cycle cycle1">
                            <div class="layui-input-group ">
                                <input type="text" placeholder="" name="minute" value="1" class="layui-input">
                                <div class="layui-input-split layui-input-suffix">
                                    分
                                </div>
                            </div>

                        </div>

                        <div class="layui-inline cycle cycle2">
                            <div class="layui-input-group">
                                <input type="text" placeholder="" name="hour" value="1" class="layui-input">
                                <div class="layui-input-split layui-input-suffix">
                                    小时
                                </div>
                            </div>
                        </div>

                        <div class="layui-inline cycle cycle3">
                            <div class="layui-input-group">
                                <input type="text" placeholder="" name="day" value="1" class="layui-input">
                                <div class="layui-input-split layui-input-suffix">
                                    天
                                </div>
                            </div>
                        </div>

                        <div class="layui-inline cycle cycle4">
                            <div class="layui-input-group">
                                <select name="week">
                                    <option value="0">周日</option>
                                    <option value="1">周一</option>
                                    <option value="2">周二</option>
                                    <option value="3">周三</option>
                                    <option value="4">周四</option>
                                    <option value="5">周五</option>
                                    <option value="6">周六</option>

                                </select>
                            </div>
                        </div>
                        <div class="layui-inline cycle cycle5">
                            <div class="layui-input-group">
                                <select name="monthday">
                                    <?php
                                    for ($i = 1; $i <= 31; $i++) {
                                    ?>
                                        <option value="<?php echo $i ?>"><?php echo $i ?>日</option>
                                    <?php
                                    }
                                    ?>

                                </select>
                            </div>
                        </div>


                        <div class="layui-inline cycle cycletime">
                            <div class="layui-input-group">
                                <div class="layui-input-split layui-input-suffix">
                                    时间点
                                </div>
                                <input type="text" placeholder="" name="time" id="time" class="layui-input">

                            </div>
                        </div>

                    </div>

                    <div class="layui-form-item rc-margin-bottom0">
                        <div class="layui-input-block">
                            <button type="button" class="layui-btn layui-btn-primary layui-btn-sm" lay-submit lay-filter="submit">提交</button>
                            <button type="reset" class="layui-btn layui-btn-sm">重置</button>
                        </div>
                    </div>
                </div>


            </div>
        </form>
    </div>
</div>

<script src="/static/admin/lib/layui/modules/cascader/cascader.js"></script>

<script>
    layui.use(function() {

        var form = layui.form;
        var layCascader = layui.layCascader;


        var el_cascaderdata = $.parseJSON('<?php echo $events ?>');
        el_cascader = layCascader({
            elem: '#event_method_id',
            filterable: true,
            clearable: true,
            options: el_cascaderdata,
            props: {
                value: 'cascaderid',
                label: 'title'
            }
        });


        var laydate = layui.laydate;
        laydate.render({
            elem: '#time',
            type: 'time',
            theme: '#016243'
        });

        function cycleHideShow(value) {
            $('.cycle').hide();
            $('.cycle' + value).show();
            if (value > 2) {
                $('.cycletime').show();
            } else {
                $('.cycletime').hide();

            }
        }
        cycleHideShow(1);

        form.on('select(cycle)', function(data) {
            var elem = data.elem; // 获得 select 原始 DOM 对象
            var value = data.value; // 获得被选中的值
            var othis = data.othis; // 获得 select 元素被替换后的 jQuery 对象
            cycleHideShow(value);
        });


        //选择任务类型 触发
        form.on('select(tasktype)', function(data) {
            var elem = data.elem; // 获得 select 原始 DOM 对象
            var value = data.value; // 获得被选中的值
            var othis = data.othis; // 获得 select 元素被替换后的 jQuery 对象

            switch (value) {
                case '1':
                    $('#event_div').show();
                    $('#cus_method_div').hide();
                    break;
                case '2':
                    $('#event_div').hide();
                    $('#cus_method_div').show();
                    break;
            }


        });

        form.on('submit(submit)', function(data) {
            $.ajax({
                url: '/admin/cnf/CrontabTask/add', //请求路径
                type: "POST", //请求方式
                data: data.field, // 默认写法
                success: function(data) {
                    if (data.code == 0) {

                        toastr_success("添加成功", function() {
                            window.location.href = "/admin/cnf/CrontabTask/index";
                        });
                    } else {
                        toastr_error(data.message);
                    }
                },
                error: function() {

                },

            });
        });

    });
</script>